<template>
<z-container>
    <z-header height="28px">table（表格）</z-header>
    <z-main>
      <z-row :gutter="12">
        <z-col :span="3">斑马纹（默认）</z-col>
          <z-col :span="12">
            <z-table :data="tableData" stripe cell-select>
              <z-table-column type="index" width="40" align="center"></z-table-column>
              <z-table-column prop="date" label="日期" width="120" align="center"></z-table-column>
              <z-table-column prop="name" label="姓名" width="180" align="center"></z-table-column>
              <z-table-column
                prop="tag"
                label="状态"
                width="100"
                align="center"
                >
                <template slot-scope="scope">
                  <z-tag
                    :type="scope.row.status ? 'primary' : 'success'"
                    dot
                    disable-transitions>{{scope.row.statusTxt}}</z-tag>
                </template>
              </z-table-column>
              <z-table-column prop="address" label="地址" ></z-table-column>
            </z-table>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">斑马纹（small）</z-col>
          <z-col :span="12">
            <z-table :data="tableData" stripe small>
              <z-table-column type="selection" width="40" align="center"></z-table-column>
              <z-table-column prop="date" label="日期" width="180"></z-table-column>
              <z-table-column prop="name" label="姓名" width="180"></z-table-column>
              <z-table-column prop="address" label="地址"></z-table-column>
            </z-table>
        </z-col>
      </z-row>
      <z-row :gutter="12">
        <z-col :span="3">边框（默认）</z-col>
          <z-col :span="12">
            <z-table :data="tableData" stripe border>
              <z-table-column type="selection" width="40" align="center"></z-table-column>
              <z-table-column prop="date" label="日期" width="180"></z-table-column>
              <z-table-column prop="name" label="姓名" width="180"></z-table-column>
              <z-table-column prop="address" label="地址" width="240"></z-table-column>
              <z-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                  <z-button @click="handleClick(scope.row)" type="text">编辑</z-button> 
                  <z-dropdown>
                    <span class="z-dropdown-link">
                        更多<i class="z-icon-arrow-down z-icon--right"></i>
                    </span>
                    <z-dropdown-menu slot="dropdown">
                      <z-dropdown-item>查看详情</z-dropdown-item>
                      <z-dropdown-item>删除</z-dropdown-item>
                      <z-dropdown-item>上线</z-dropdown-item>
                      <z-dropdown-item disabled>下线</z-dropdown-item>
                    </z-dropdown-menu>
                  </z-dropdown>
                </template>
              </z-table-column>
            </z-table>
        </z-col>
      </z-row>
  </z-main>
  <z-dialog
    title="编辑"
    sub-title="订投-取件超时 GD202002141858110000"
    :visible.sync="dialogVisible"
    width="50%"
    :before-close="handleClose">
    
    <z-form ref="form" :model="form" label-width="100px" label-position="top">
      <z-row :gutter="16">
        <z-col :span="8" >
          <z-form-item label="日期" prop="date" required>
            <z-input v-model="form.date"></z-input>
          </z-form-item>
        </z-col>
        <z-col :span="8">
          <z-form-item label="姓名" prop="name">
            <z-input v-model="form.name"></z-input>
          </z-form-item>
        </z-col>
        <z-col :span="8">
          <z-form-item label="地址" prop="address">
            <z-input v-model="form.address"></z-input>
          </z-form-item>
        </z-col>
      </z-row>
    </z-form>
    <span slot="footer" class="dialog-footer">
      <z-button @click="dialogVisible = false">取 消</z-button>
      <z-button type="primary" @click="dialogVisible = false">确 定</z-button>
    </span>
  </z-dialog>
</z-container>

</template>
<script>
export default{
  name:'cTable',
  data(){
    return {
       tableData: [{
            date: '2016-05-02',
            name: '王小虎',
            status:true,
            statusTxt:'已审批',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            statue:false,
            statusTxt:'未审批',
            address: '上海市普陀区金沙江路 1517 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            statue:false,
            statusTxt:'未审批',
            address: '上海市普陀区金沙江路 1519 弄'
          }, {
            date: '2016-05-03',
            name: '王小虎',
            statue:true,
            statusTxt:'已审批',
            address: '上海市普陀区金沙江路 1516 弄'
          }],
        dialogVisible:false,
        form:{
          date:'',
          name:'',
          address:''
        },
    }
  },
   methods: {
      // 打开弹窗
      handleClick(row){
        this.dialogVisible = true
        this.form = {...row}
      },
      // 关闭弹窗
      handleClose(){
        this.dialogVisible = false
      }
    }
}
</script>
<style>
.demo .z-dropdown-link{
  color:#3693ff;
  padding-left:8px;
  margin-left:8px;
  border-left:1px solid #E4E7ED;
}
</style>